<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宝贝投-P2P平台->运营后台</title>
<!-- links begin -->
<link rel="shortcut icon" href="../favicon.ico" />
<link rel="stylesheet" href="../js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../css/core.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="../css/account.css" />

<script type="text/javascript" src="../js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="../js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.bootstrap.js"></script>
<!-- links end -->
<link rel="stylesheet" type="text/css" href="../js/plugins/flipcountdown/jquery.flipcountdown.css" />
<script type="text/javascript" src="../js/plugins/flipcountdown/jquery.flipcountdown.js"></script>

<script type="text/javascript" src="../js/common.js"></script>
		
<style type="text/css">
	.el-userhead{
		width: 100px;
		height: 100px;
		display: block;
		margin: 0px auto;

	}
	.muted{
		color: #999;
	}
	.text-info{
		color: #09d;
	}
</style>
</head>
<body>
	<div class="container">
		<!-- 网页顶部 begin -->
		<div class="mgr-header"></div>
		<!-- 网页顶部 end -->

		<div class="row">
			<!--左侧菜单栏 begin -->
			<div class="mgr-leftmenu col-sm-3"></div>
			<!--左侧菜单栏 end -->
			<div class="col-sm-9">
				<div class="row">
						<div class="col-sm-6">
							<h3 class="text-info" style="margin-top: 0px;">
								<span id="title">加载中...</span>
								<small><label class="label label-primary">信</label></small>
							</h3>
							<div>
								<table width="100%" height="250px">
									<tr>
										<td class="muted">借款人</td>
										<td class="text-info" style="padding-left: 10px;" colspan="3">
											<span id="borrowUsername">加载中...</span>
										</td>
									</tr>
									<tr>
										<td class="muted" width="80px">借款金额</td>
										<td class="text-info" width="120px" style="padding-left: 10px;">
											<span id="borrowAmount">加载中...</span>
										</td>
										<td class="muted" width="80px">年化利率</td>
										<td class="text-info" style="padding-left: 10px;">
											<span id="yearRate">加载中...</span>
										</td>
									</tr>
									<tr>
										<td class="muted ">借款期限</td>
										<td class="text-info" style="padding-left: 10px;">
											<span id="repaymentMonth">加载中...</span>
										</td>
										<td class="muted">总利息</td>
										<td class="text-info" style="padding-left: 10px;">
											<span id="totalInterest">加载中...</span>
										</td>
									</tr>
									<tr>
										<td class="muted">还款方式</td>
										<td class="text-info" style="padding-left: 10px;">
											<span id="repaymentType">加载中...</span>
										</td>
										<td class="muted">最小投标</td>
										<td class="text-info" style="padding-left: 10px;">
											50元
										</td>
									</tr>
									<tr>
										<td class="muted">剩余时间</td>
										<td class="text-info" style="padding-left: 10px;" colspan="3">
											<div id="bidDeadline"></div>
										</td>
									</tr>
								</table>
							</div>
						</div>
					<div class="col-sm-3">
						<table style="height:110px; width:230px;">
							<tr>
								<td class="muted">投标总数</td><td class="text-info" style="padding-left: 10px;">
								<span id="bidNum">加载中...</span>
								</td>
							</tr>
							<tr>
								<td class="muted">还需金额</td><td class="text-info" style="padding-left: 10px;">
								<span id="lastAmount">加载中...</span>
								</td>
							</tr>
							<tr>
								<td  class="muted">投标进度</td>
								<td class="text-info" style="padding-left: 10px;">
									<span id="bidPercent">加载中...</span>
								</td>
							</tr>
							<tr>
								<td colspan="2">
								<div style="margin-bottom: 10px;" class="progress">
									<div id="bidProgress" style="width: 0%;" class="progress-bar progress-bar-info progress-bar-striped"></div>
								</div>
								</td>
							</tr>
						</table>
							<h4 id="borrowState" class="text-primary">加载中...</h4>
					</div>
				</div>

				<div class="panel panel-default">
					<div class="panel-heading">
						借款人信息
					</div>
					<div class="panel-body">
						<table>
							<tbody>
								<tr>
									<td class="muted text-right" width="140px;">真实姓名</td>
									<td width="150px;" style="padding-left: 10px;" class="text-info">
										<span id="realname">加载中...</span>
									</td>
									<td class="muted text-right" width="140px;">身份证号码</td>
									<td width="150px;" style="padding-left: 10px;" class="text-info">
										<span id="idCardNumber">加载中...</span>
									</td>
									<td class="muted text-right" width="140px;">注册时间</td>
									<td width="150px;" style="padding-left: 10px;" class="text-info">
										<span id="createTime">加载中...</span>
									</td>
								</tr>
								<tr>

									<td class="muted text-right" width="140px;">文化程度</td>
									<td width="150px;" style="padding-left: 10px;" class="text-info">
										<span id="eduBackgroundId">加载中...</span>
									</td>
									<td class="muted text-right" width="140px;">住房条件</td>
									<td width="150px;" style="padding-left: 10px;" class="text-info">
										<span id="houseConditionId">加载中...</span>
									</td>
									<td class="muted text-right">年收入</td>
									<td style="padding-left: 10px;" class="text-info">
										<span id="incomingLevelId">加载中...</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<!-- 还款记录面板 begin -->
				<div class="panel panel-default">
					<div class="panel-heading">
						<div style="font-size: 16px;">还款记录</div>
					</div>
					<div class="panel-body">
						<table id="tblRepayment" class="table table-striped">
							<thead>
							<tr>
								<th>还款金额</th>
								<th>还款期数</th>
								<th>还款时间</th>
								<th>还款状态</th>
							</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
				<!-- 还款记录面板 end -->

				<!-- 投资记录面板 Begin -->
				<div class="panel panel-default">
					<div class="panel-heading">
						<div style="font-size: 16px;">投标记录</div>
					</div>
					<div class="panel-body">
							<table id="tblBid" class="table table-striped">
							<thead>
								<tr>
									<th>投标人</th>
									<th>投标金额</th>
									<th>投标时间</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
				<!-- 投资记录面板 End -->
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

// '数据字典项'集合
let systemDictionaryItemList = new Array();

// 当前借款信息id
let borrowId = GetQueryString('id');

// 当前借款人id
let borrowUserId = '';

$(function(){

    // 加载公共顶部模板
    $('.mgr-header').load('tpl-head.html');

    // 加载左侧菜单栏模板
    $('.mgr-leftmenu').load('tpl-leftmenu.html');

    // 加载'数据字典项列表'
    loadingSystemDictionaryItemList();

    // 加载'借款信息'数据
    loadingBorrow();

    // 加载'借款人信息'
    loadingBorrowUserInfo();

    // 加载'还款列表'
    loadingRepayment();

    // 加载'投标列表'
    loadingBid();

});// $(function());

/** 加载'还款'数据 **/
function loadingRepayment(){

    // 加载'还款记录'数据
    $.post('http://localhost:8080/finance/repayment/getByBorrowId', {

        borrowId: borrowId

    }, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        fillRepaymentTable( result.data );

    });// $.post();

}// loadingRepayment();

/** 填充表格数据 **/
function fillRepaymentTable( listData ) {

    // 清空表格数据
    $('#tblRepayment tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !listData || listData.length == 0 ){
        // 设置没有数据提示
        $('#tblRepayment tbody').html('<tr><td colspan="4" align="center"><p class="text-danger">暂时没有还款记录</p></td></tr>');
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < listData.length; i++ ) {

        let repayment = listData[i];

        // 还款金额
        let totalAmount = repayment.totalAmount / MONEY_UNIT;
        let tdTotalAmount = '<td class="text-primary">' + totalAmount + '元</td>';

        // 还款期数
        let tdPeriod = '<td>' + repayment.period + '期</td>';

        // 还款时间
        let tdRepaymentTime = '<td>' + repayment.repaymentTime + '</td>';

        // 还款状态
        let state = REPAYMENT_STATE[repayment.state];
        let tdState = '<td>' + state + '</td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblRepayment tbody').append('<tr>' + tdTotalAmount + tdPeriod + tdRepaymentTime + tdState + '</tr>');

    }// for();

}// fillRepaymentTable( listData );

/** 加载'投资'数据 **/
function loadingBid(){

    // 加载'充值记录'数据
    $.post('http://localhost:8080/finance/bid/getByBorrowId/' + borrowId, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        let listData = result.data;

        // 填充表格数据
        fillBidTable( listData );

    });// $.post();


}// loadingBid();

/** 填充表格数据 **/
function fillBidTable( listData ) {

    // 清空表格数据
    $('#tblBid tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !listData || listData.length == 0 ){
        // 设置没有数据提示
        $('#tblBid tbody').html('<tr><td colspan="3" align="center"><p class="text-danger">暂时没有投标信息</p></td></tr>');
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < listData.length; i++ ) {

        let bid = listData[i];

        let tdBidUsername = '<td>' + bid.bidUsername + '</td>';

        // 投标金额
        let bidAmount = bid.bidAmount / MONEY_UNIT;
        let tdBidAmount = '<td>' + bidAmount + '元</td>';

        // 投标时间
        let tdBidTime = '<td>' + bid.bidTime + '</td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblBid tbody').append('<tr>' + tdBidUsername + tdBidAmount + tdBidTime + '</tr>');

    }// for();

}// fillBidTable( var listData );

/** 加载'数据字典项列表' **/
function loadingSystemDictionaryItemList(){

    // 加载'数据字典'数据
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/system/dictionaryItem/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 将'数据字典项'集合放入全局变量中
            systemDictionaryItemList = result.data;

        }// success(result);

    });// $.ajax();

}// loadingSystemDictionaryItemList();

/** 加载'借款信息'数据 **/
function loadingBorrow() {

    // 加载借款信息
    $.ajax({
        type: 'GET',
		async: false,
        url: 'http://localhost:8080/finance/borrow/get/' + borrowId,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }


            // 如果返回的响应码正确，就进行数据填充
            let borrow = result.data;

            // 设置当前借款人id
            borrowUserId = borrow.borrowUserId;

            // 填充'借款信息'
            $('#title').text(borrow.title);
            $('#borrowUsername').text(borrow.borrowUsername);
            $('#borrowAmount').text(borrow.borrowAmount / MONEY_UNIT + '元');

            $('#yearRate').text(borrow.yearRate + '%');
            $('#repaymentMonth').text(borrow.repaymentMonth + '期');
            $('#repaymentType').text(REPAYMENT_TYPE[borrow.repaymentType]);
            $('#totalInterest').text(borrow.totalInterest / MONEY_UNIT + '元');

            // 投标总数
            $('#bidNum').text(borrow.bidNum);
            // 还需金额
			let lastAmount = (borrow.borrowAmount - borrow.currentBidAmount) / MONEY_UNIT;
			$('#lastAmount').text(lastAmount + '元');

            // 投标进度
            let bidPercent = (borrow.currentBidAmount / borrow.borrowAmount) * 100;
            $('#bidPercent').text( bidPercent + '%');
            $('#bidProgress').css('width', bidPercent + '%');

			// 借款状态
			$('#borrowState').text(BORROW_STATE[borrow.borrowState]);

			// 如果'借款审核状态'是'招标中'
			if( borrow.borrowState == BORROW_STATE_CONST.BIDDING ) {

                // 设置'截止日期'倒计时
                $('#bidDeadline').html('');
                $("#bidDeadline").flipcountdown({
                    size:'xs',
                    beforeDateTime: borrow.bidDeadline
                });

			}// if();

        }// success(result);

    });// $.ajax();

}// loadingBorrow();

/** 加载'借款人信息'数据 **/
function loadingBorrowUserInfo() {

    // 加载个人信息
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/user/userinfo/get/' + borrowUserId,
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }


            // 如果返回的响应码正确，就进行数据填充
            let userInfo = result.data;

            // 填充'个人信息'
            $('#realname').text(userInfo.realname == '' ? '暂无' : userInfo.realname);
            $('#idCardNumber').text(userInfo.idCardNumber == '' ? '暂无' : userInfo.idCardNumber);
            $('#phoneNumber').text(userInfo.phoneNumber == '' ? '暂无' : userInfo.phoneNumber);
            $('#createTime').text(userInfo.createTime);

            $('#incomingLevelId').text(getDictionaryValue(userInfo.incomeLevelId));
            $('#eduBackgroundId').text(getDictionaryValue(userInfo.eduBackgroundId));
            $('#houseConditionId').text(getDictionaryValue(userInfo.houseConditionId));

        }// success(result);

    });// $.ajax();

}// loadingBorrowUserInfo();

/** 根据数据字典项id，获取数据字典值 **/
function getDictionaryValue( id ) {

    // console.log('itemId:' + id);

    // console.log('systemDictionaryItemList.length:' + systemDictionaryItemList.length);

    for( let i = 0; i < systemDictionaryItemList.length; i++ ) {

        let tmpSystemDictionaryItem = systemDictionaryItemList[i];

        if( tmpSystemDictionaryItem.id == id )
            return tmpSystemDictionaryItem.value;

    }// for( let i = 0; i < systemDictionaryItemList.length; i++ );

    return '暂无';

}// getDictionaryValue( id );

</script>
</html>